<template>
  <div class="class-list">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>班级管理</span>
          <el-button type="primary" @click="handleCreate">新增班级</el-button>
        </div>
      </template>

      <DataTable
        :data="tableData"
        :columns="columns"
        :pagination="pagination"
        v-loading="loading"
        @update:pagination="handlePaginationChange"
      >
        <template #status="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'info'">
            {{ row.status === 'active' ? '正常' : '停用' }}
          </el-tag>
        </template>
        
        <template #actions="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">小组管理</el-button>
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </DataTable>
    </el-card>
    
    <CreateClassDialog ref="createDialogRef" @success="loadClassList" />
    <EditClassDialog ref="editDialogRef" @success="loadClassList" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import DataTable from '../../components/common/DataTable.vue'
import { classService } from '../../services/class'
import { ElMessageBox } from 'element-plus'
import { showSuccess, showError } from '../../utils/message'
import CreateClassDialog from '../../components/teachers/CreateClassDialog.vue'
import EditClassDialog from '../../components/teachers/EditClassDialog.vue'

const router = useRouter()
const loading = ref(false)
const tableData = ref([])

const columns = [
  { prop: 'id', label: '班级编号', width: '120',align: 'center' },
  { prop: 'name', label: '班级名称',align: 'center' },
  { prop: 'description', label: '描述',align: 'center' },
  { prop: 'status', label: '状态', width: '100', slot: 'status',align: 'center' },  // 添加 slot
  { 
    prop: 'students', 
    label: '学生数量', 
    width: '100',
    align: 'center',
    formatter: (row) => row.students?.[0]?.count || 0
  },
  { label: '操作', width: '250', fixed: 'right', slot: 'actions',align: 'center' }
]

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const loadClassList = async () => {
  try {
    loading.value = true
    const { data, total } = await classService.getClasses(
      pagination.currentPage,
      pagination.pageSize
    )
    tableData.value = data
    pagination.total = total
  } catch (error) {
    showError('加载班级列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadClassList()
})

const handlePaginationChange = (newPagination) => {
  Object.assign(pagination, newPagination)
  loadClassList()
}

const handleDetail = (row) => {
  router.push({
    name: 'ClassDetail',
    params: { id: row.id }
  })
}

const createDialogRef = ref(null)
const editDialogRef = ref(null)

const handleCreate = () => {
  createDialogRef.value?.open()
}

const handleEdit = (row) => {
  editDialogRef.value?.open(row)
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除班级"${row.name}"吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    await classService.deleteClass(row.id)
    showSuccess('删除成功')
    loadClassList()
  } catch (error) {
    if (error !== 'cancel') {
      showError('删除失败')
      console.error(error)
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>